/**
 * 考勤统计
 * @time 2017年11月6日15:33:44
 * @author 罗涛
 */
'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import Header from './Common/Header'
import {HttpService, Toast}  from'../Http';
import {
    newsStatus,
    imgOnError,
    getNowFormatDate,
    getWeek,
    getCountDays
} from '../Tool';

import touxiang from '../../src/img/touxiang.png'

export default class StatisticsAtt extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            studentName: this.props.params.studentName,
            studentId: this.props.params.studentId,
            newDate:  getNowFormatDate('yyyy-MM'),
            showDate:  getNowFormatDate('yyyy-MM'),
            dataList: {"comeLate":[],"leftEarly":[],"absent":[]},
            countDays: new Date().getDate(),
            isLoad: false
        };
    }

    componentWillMount() {
        this.getDataList(this.state.showDate);
    }
    /**
     * 获取一月考勤信息
     */
     getDataList(timeSection){
         let data = {
             token: localStorage.appToken,
             timeSection: timeSection,
         };
        if(this.state.studentId){
            data = {
                token: localStorage.appToken,
                timeSection: timeSection,
                babyid: this.state.studentId,
            }
         }
        HttpService.query({
            url: '/teacherapp/student/getAttendanceCount',
            data: data,
            success: (res => {
                if (res.code == "10144") {
                    if(res.data.comeLate==null){
                        res.data.comeLate = [];
                    }
                    if(res.data.leftEarly==null){
                        res.data.leftEarly = [];
                    }
                    if(res.data.absent==null){
                        res.data.absent = [];
                    }
                    if(timeSection.replace('-','')==this.state.newDate.replace('-','')){
                        this.setState({dataList: res.data,isLoad:true,showDate:timeSection,countDays:new Date().getDate()});
                    }else{
                        this.setState({dataList: res.data,isLoad:true,showDate:timeSection,countDays:getCountDays(timeSection)});
                    }
                }else{
                    Toast.toast(res.msg);
                }
            })
        })
     }

    /**
     * 改变月份
     * @return {XML}
     */
    changeDateMonth(type,e){
        let date = new Date(this.state.showDate),showDate = this.state.showDate;
        let month = date.getMonth() + 1;
        if(type){
            if(month==1){
                showDate = date.getFullYear()-1+'-12';
            }else{
                month = month-1;
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                showDate = date.getFullYear()+'-'+month;
            }
        }else{
            if(month==12){
                showDate = date.getFullYear()+1+'-01';
            }else{
                month = month+1;
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                showDate = date.getFullYear()+'-'+month;
            }
        }
        if(showDate.replace('-','')<=this.state.newDate.replace('-','')){
            this.getDataList(showDate);
        }
    }
    render() {
        let {studentName,showDate,dataList,isLoad,countDays} = this.state;
        let attendanceTimeArray = [];
        //迟到
        let comeLates = dataList.comeLate.map((data)=>{
            let attendanceTime = getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(data.checkTime[0]));
            let time = attendanceTime.substring(0,10);
            attendanceTimeArray.push(time);
            return(
                <div>{data.objectName+' '+time}({getWeek(time)})&nbsp;{attendanceTime.substring(11,16)}</div>
            )
        });
        //早退
        let leftEarlys = dataList.leftEarly.map((data)=>{
            let attendanceTime = getNowFormatDate('yyyy-MM-dd HH:MM:SS',new Date(data.checkTime[0]));
            let time = attendanceTime.substring(0,10);
            attendanceTimeArray.push(time);
            return(
                <div>{data.objectName+' '+time}({getWeek(time)})&nbsp;{attendanceTime.substring(11,16)}</div>
            )
        });
        //缺勤
        let absents = dataList.absent.map((data)=>{
            let attendanceTime = getNowFormatDate('yyyy-MM-dd',new Date(data.attendanceTime));
            attendanceTimeArray.push(attendanceTime);
            let checkBeginTime = getNowFormatDate('HH:MM',new Date(data.checkBeginTime));
            let checkEndTime = getNowFormatDate('HH:MM',new Date(data.checkEndTime));
            return(
                <div>{data.objectName+' '+attendanceTime}({getWeek(attendanceTime)})&nbsp;{checkBeginTime}-{checkEndTime}</div>
            )
        });
        attendanceTimeArray = Array.from(new Set(attendanceTimeArray));//new Set()去重 Array.from()把类数组对象
        return (
            <div className="statisticsAtt">
                <Header title={studentName != undefined?studentName+'的考勤统计':''+'考勤统计'} left="1" />
                <div className="statis">
                    <div className="date">
                        <div className="att-left">
                            <div className="img-left" onClick={this.changeDateMonth.bind(this,true)} />
                            <div className="month-info"><span className="month">{showDate.substring(5,7)}</span>月</div>
                            <div className="img-right" onClick={this.changeDateMonth.bind(this,false)} />
                        </div>
                        <div className="att-right">
                            <div className="title"><span />正常考勤</div>
                            <div className="number">{countDays-attendanceTimeArray.length}天</div>
                        </div>
                    </div>
                    <div className="count">
                        <div className="type">
                            <span className="left-color comelate"/>
                            <span className="title">迟到</span>
                            <span className="number">{dataList.comeLate.length}人次</span>
                        </div>
                        <div className="type">
                            <span className="left-color leftearly"/>
                            <span className="title">早退</span>
                            <span className="number">{dataList.leftEarly.length}人次</span>
                        </div>
                        <div className="type">
                            <span className="left-color absence"/>
                            <span className="title">缺勤</span>
                            <span className="number">{dataList.absent.length}人次</span>
                        </div>
                    </div>
                </div>
                <div className="statis-info">
                    <div className="title-attendance">迟到记录</div>
                    <div className="comelate-list">
                        {isLoad==true?(comeLates!=''?comeLates:<div>暂无迟到记录</div>):<div>&nbsp;</div> }
                    </div>
                    <div className="title-attendance">早退记录</div>
                    <div className="leftearly-list">
                        {isLoad==true?(leftEarlys!=''?leftEarlys:<div>暂无迟到记录</div>):<div>&nbsp;</div> }
                    </div>
                    <div className="title-attendance">缺勤记录</div>
                    <div className="absence-list">
                        {isLoad==true?(absents!=''?absents:<div>暂无迟到记录</div>):<div>&nbsp;</div> }
                    </div>
                </div>
            </div>
        )
    }
}
